<template>
    <el-dialog class="add-dia social-serve-add center-add" :title="$store.state.dia.fields.title"
               :visible.sync="$store.state.dia.fields.show">
        <div class="list-1">
            <div v-for="(item,k) in list" :key="k" class="item">
                <div v-if="item.key != 'add'">
                    <div class="title">
                        {{item.name}}
                        <span @click="save(k)">添加</span>
                        <span style="color: red" v-if="index1 === k" @click="del(k)">删除</span>
                    </div>
                    <div>
                        <div @click="index = item1;index1=k" class="but" v-bind:class="index == item1 ? 'but-active':''" v-for="(item1,k1) in item.content" :key="k1">
                            {{item1}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
              <el-button @click="$store.state.dia.fields.show = false">确定</el-button>
            </span>
    </el-dialog>
</template>
<script>
    export default {
        props: ["model", "form"],
        components: {},
        name: "",
        data() {
            return {
                index:'',
                index1:'',
                list: [],
                tablename:'',
            };
        },
        methods: {
            del(index){
                var k = this.list[index].content.indexOf(this.index);
                if(k>-1){
                    this.list[index].content.splice(k,1);
                    _g.apiPost("teacher/savefields", {tablename:this.tablename,field:this.list[index].key,content:this.list[index].content}).then(res => {
                        if(res.code != 0 ){
                            _g.toastMsg("error", res.msg)
                        }
                        this.$emit("reflash")
                    })
                }
                this.index = ''
                this.index1 = ''
            },
            save(index) {
                this.$prompt('添加分类', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '请输入内容'
                }).then(({ value }) => {
                    this.list[index].content.push(value);
                    console.log(this.list[index].content)
                    _g.apiPost("teacher/savefields", {tablename:this.tablename,field:this.list[index].key,content:this.list[index].content}).then(res => {
                        _g.toastMsg(res.code == 0 ? "success" : "error", res.msg)
                        this.$emit("reflash")
                    })
                }).catch(() => {
                });
            },
            loadData() {
                _g.apiPost("teacher/getfieldslist", {tablename:this.tablename}).then(res => {
                    this.list = res.data;
                })
            }


        },
        created() {
            var path = _g.getRouterPath(this)
            var tablename = ''
            this.$store.state.commonMenu.forEach(ele => {
                if (ele.children) {
                    tablename = ele.children.find(val => val.url == path) ? ele.children.find(val => val.url == path).tablename : tablename ? tablename : ""
                } else if (ele.url === path) {
                    tablename = ele.tablename
                }
            });
            this.tablename = tablename;
            this.loadData()
            // this.form.add=localStorage.getItem('userName')
        }
    }
</script>
<style scoped>
    .tmpl {
    }

    .list-1 {
        width: 100%;
    }

    .list-1 .title span {
        float: right;
        cursor: pointer;
        margin-left: 15px;
    }

    .list-1 .title {
        height: 45px;
        border-bottom: 1px solid #f6f6f6;
        line-height: 45px;
        font-size: 14px;
        background-color: rgba(242, 242, 242, 1);
        padding: 0px 10px;
        margin-bottom: 10px;
        clear: both;
    }

    .list-1 .item {
        margin-bottom: 20px;
    }
    .list-1 .but{
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px 20px;
        cursor: pointer;
        float: left;
    }
    .list-1 .but-active{
        border: 1px solid #3f9ce2;
        color: #3f9ce2;
    }
</style>